

<template>
    <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="8" :offset="6">
                <el-form-item label="角色名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="备注信息">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>

                <el-form-item label="权限配置">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="[2, 3]"
                        :default-checked-keys="[5]"
                        :props="defaultProps"
                    >
                    </el-tree>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-row>
</template>
<script>
export default {
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            data: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    label: '三级 1-1-1'
                                },
                                {
                                    id: 10,
                                    label: '三级 1-1-2'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1'
                        },
                        {
                            id: 6,
                            label: '二级 2-2'
                        }
                    ]
                },
                {
                    id: 3,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1'
                        },
                        {
                            id: 8,
                            label: '二级 3-2'
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    created() {
        //这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

        console.log(this.$route.params);
        console.log(this.$route.query);
    },
    mounted() {
        //这个时候挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。mounted在整个实例的生命周期中只执行一次。
    },
    beforeCreate() {
        var id = this.$route.query.id;
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        }
    }
};
</script>
<style scoped>
</style>